<script setup>
import { ref } from 'vue'
import { Edit } from '@element-plus/icons-vue'
import { GetLoadService, GetNodeByName, SetNodeService } from '@/api/node.js'
import { GetAlgorithmDetailService } from '@/api/algorithm.js'
import { useUserStore } from '@/stores/modules/user'
const useStore = useUserStore()
// 节点修改模块
import NodeUpdate from './NodeUpdate.vue'

// 节点数据源展示框
import NodeSources from './NodeSources.vue'
// 算法信息修改模块
import AlgEdit from './AlgEdit.vue'
// 算法模型修改展示窗
import AlgFile from './AlgFile.vue'
// 获取路径传参数据
const props = defineProps({
  name: String
})
const mode = ref('')
// 获取算法类型
const getAlgType = async () => {
  const { data } = await GetLoadService(props.name)
  mode.value = data.data.mode
}

const dialogVisible = ref(false)
const title = ref('节点配置')
const selectednodeinfo = ref({})
const open = async (algInfo) => {
  algDetail.value = { ...algInfo }
  const {
    data: { data }
  } = await GetNodeByName(useStore.getNodeName())
  selectednodeinfo.value = data
  dialogVisible.value = true
}
// 算法信息
const algDetail = ref({
  id: 0,
  name: '',
  mode: '',
  outAddr: '',
  model: '',
  nodeId: 0
})
// 设置节点状态按键
const btnMsg = ref('running')
//切换查看的节点
//选中节点，对应的算法和节点信息
// const selectedNode = async () => {
//   const {
//     data: { data }
//   } = await GetNodeByName(props.name)
//   selectednodeinfo.value = { ...data }
//   if (selectednodeinfo.value.status === 'running') {
//     btnMsg.value = 'stopping'
//   } else {
//     btnMsg.value = 'running'
//   }
//   //获取选中节点的算法信息
//   const res = await GetAlgorithmDetailService(props.id)
//   console.log(res)

//   algDetail.value = res.data.data
// }
// selectedNode(props.id)

// 显示编辑算法信息弹窗
const algEditRef = ref()
const algEdit = () => {
  if (selectednodeinfo.value.destAddr == null) {
    ElMessage.info('请先配置节点的输出地址')
  } else {
    algEditRef.value.open(algDetail.value, selectednodeinfo.value.destAddr)
  }
}
//修改节点
const nodeEditRef = ref()

// 查看节点数据源信息
const sourcesRef = ref()
const showMore = () => {
  sourcesRef.value.open(selectednodeinfo.value.id)
}
// 控制节点
const handleClick = async (id) => {
  ElMessageBox.confirm('确认' + btnMsg.value + '节点?', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const {
        data: { data }
      } = await SetNodeService(id, btnMsg.value)
      console.log(data)
      // selectedNode()
    })
    .catch(() => {
      // selectedNode()
    })
}
const handleSuccess = () => {
  // selectedNode()
}
// 上传模型文件弹窗
const algFileRef = ref()
const onSetModel = () => {
  algFileRef.value.open(algDetail.value.id, algDetail.value.model)
}
// 获取算法信息
const getAlgInfo = async () => {
  algDetail.value = {}
  const {
    data: { data }
  } = await GetAlgorithmDetailService(selectednodeinfo.value.id)
  algDetail.value = { ...data }
}
// 向外暴露方法
defineExpose({
  open
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    width="40%"
    custom-class="my-dialog"
  >
    <div
      class="list"
      v-if="selectednodeinfo"
      style="background-color: rgb(49, 56, 98)"
    >
      <div>
        <div style="padding: 0 15px">
          <div class="context" style="position: relative">
            <span>算法信息:&ensp;&ensp;{{ algDetail.name }}</span>
            <el-icon class="icon" @click="algEdit">
              <Edit />
            </el-icon>
          </div>
          <div class="context" style="position: relative">
            <span>算法模型:</span>
            <span style="margin-left: 20px">{{
              algDetail.model || '暂无算法模型'
            }}</span>
            <el-icon class="icon" @click="onSetModel">
              <Edit />
            </el-icon>
          </div>
          <div class="context">
            <span>节点地址：</span
            ><span
              style="color: #e34c4c; padding-left: 10px; font-size: 15px"
              >{{ selectednodeinfo.addr }}</span
            >
          </div>
          <div class="context">
            <span>节点状态：</span
            ><span style="color: #e34c4c; padding-left: 10px">{{
              selectednodeinfo.status
            }}</span>
          </div>
          <div class="context" style="position: relative">
            <span>数据源：</span>
            <span style="margin-left: 25px; font-size: 14px">{{
              selectednodeinfo.source || '暂无数据源信息'
            }}</span>

            <el-icon class="icon" @click="showMore">
              <Edit />
            </el-icon>
          </div>
        </div>

        <div style="display: flex; justify-content: center">
          <el-button
            style="
              width: 200px;
              height: 35px;
              background-color: rgb(26, 192, 188);
              color: white;
              border: 0;
              font-family: 700;
            "
            @click="handleClick(selectednodeinfo.id)"
          >
            {{ btnMsg }}
          </el-button>
        </div>
      </div>
    </div>
    <el-empty v-else description="暂无节点信息"></el-empty>
    <!-- 修改节点组件 -->
    <NodeUpdate ref="nodeEditRef" @success="handleSuccess"></NodeUpdate>

    <!-- 数据源组件 -->
    <NodeSources ref="sourcesRef" @success="handleSuccess"></NodeSources>
    <!-- 修改算法模型组件 -->
    <AlgEdit ref="algEditRef" @success="getAlgInfo"></AlgEdit>
    <!-- 上传算法模型组件 -->
    <AlgFile ref="algFileRef" @success="getAlgInfo"></AlgFile>
  </el-dialog>
</template>

<style>
.icon {
  position: absolute;
  right: 20px;
  font-size: 18px;
}
.context {
  padding: 10px 15px;
  display: flex;
  background-color: rgb(23, 41, 83);
  margin-bottom: 15px;
}
.my-dialog .el-dialog__body {
  color: white !important;
}
.label {
  padding: 1px 20px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #3a416a;
}
.el-dialog {
  /* width: 577px; */
  /* height: 288px; */
  background-color: #313862 !important;
  border-top: 21px solid #5ed1f7;
}
.el-dialog__title {
  font-size: 16px;
  color: #fff;
}
.el-form-item__label {
  font-size: 15px;
  color: #fff;
}

.dialog-footer {
  display: flex;
  margin-top: -30px;
}
.el-button {
  width: 59px;
  height: 50px;
  /* background: #8091a5; */
  background-color: rgb(58, 65, 106);
  color: white;
  border: 1px solid rgba(128, 145, 165, 0.1);
  /* opacity: 0.2; */
}

.el-button:hover {
  color: #fff;
  background: linear-gradient(90deg, #5ed1f7 0%, #4791f3 100%);
  border: 1px solid #4790f3;
}

.input-field {
  padding-left: 10px;
  width: 273px;
  height: 36px;
  background: rgba(0, 0, 0, 0);
  border: 1px solid rgb(58, 65, 106);
  /* opacity: 0.8; */
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: #8091a5;
  line-height: 24px;
  /* text-align: center; */
  font-style: normal;
  text-transform: none;
  outline: none;
  background-color: rgb(58, 65, 106);
}
</style>
